import React, { Component } from 'react';
import { 
  Card, 
  Grid, 
  Badge, 
  Button, 
  Space,
  Toast 
} from 'antd-mobile';
import { 
  ShopbagOutline, 
  HeartOutline, 
  StarOutline 
} from 'antd-mobile-icons';
import PropTypes from 'prop-types';
import styles from './ProductList.module.less';

class ProductList extends Component {
  static propTypes = {
    // 可以添加props验证
  };

  constructor(props) {
    super(props);
    this.state = {
      products: [
        {
          id: 1,
          name: '智能手机',
          price: 2999,
          originalPrice: 3999,
          image: 'https://via.placeholder.com/200x200',
          rating: 4.8,
          sales: 1234,
          isFavorite: false,
        },
        {
          id: 2,
          name: '无线耳机',
          price: 299,
          originalPrice: 399,
          image: 'https://via.placeholder.com/200x200',
          rating: 4.6,
          sales: 567,
          isFavorite: true,
        },
        {
          id: 3,
          name: '智能手表',
          price: 1299,
          originalPrice: 1599,
          image: 'https://via.placeholder.com/200x200',
          rating: 4.7,
          sales: 890,
          isFavorite: false,
        },
        {
          id: 4,
          name: '平板电脑',
          price: 1999,
          originalPrice: 2499,
          image: 'https://via.placeholder.com/200x200',
          rating: 4.9,
          sales: 234,
          isFavorite: true,
        },
      ],
    };
  }

  handleProductClick = (product) => {
    Toast.show(`点击了${product.name}`);
  };

  handleFavoriteClick = (productId, event) => {
    event.stopPropagation();
    const { products } = this.state;
    const updatedProducts = products.map(product => 
      product.id === productId 
        ? { ...product, isFavorite: !product.isFavorite }
        : product
    );
    this.setState({ products: updatedProducts });
    
    const product = products.find(p => p.id === productId);
    Toast.show(product.isFavorite ? '已取消收藏' : '已添加到收藏');
  };

  handleAddToCart = (product, event) => {
    event.stopPropagation();
    Toast.show(`已将${product.name}添加到购物车`);
  };

  renderStars = (rating) => {
    const stars = [];
    const fullStars = Math.floor(rating);
    const hasHalfStar = rating % 1 !== 0;

    for (let i = 0; i < fullStars; i++) {
      stars.push(
        <StarOutline key={i} style={{ color: '#ffc107', fontSize: '12px' }} />
      );
    }

    if (hasHalfStar) {
      stars.push(
        <StarOutline key="half" style={{ color: '#ffc107', fontSize: '12px' }} />
      );
    }

    return stars;
  };

  render() {
    const { products } = this.state;

    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <h1 className={styles.title}>商品列表</h1>
          <p className={styles.subtitle}>精选好物，品质保证</p>
        </div>

        <div className={styles.content}>
          <Grid columns={2} gap={12}>
            {products.map(product => (
              <Grid.Item key={product.id}>
                <Card 
                  className={styles.productCard}
                  onClick={() => this.handleProductClick(product)}
                >
                  <div className={styles.productImage}>
                    <img 
                      src={product.image} 
                      alt={product.name}
                      className={styles.image}
                    />
                    <div 
                      className={styles.favoriteBtn}
                      onClick={(e) => this.handleFavoriteClick(product.id, e)}
                    >
                      <HeartOutline 
                        style={{ 
                          color: product.isFavorite ? '#ff4d4f' : '#ccc',
                          fontSize: '18px'
                        }} 
                      />
                    </div>
                  </div>
                  
                  <div className={styles.productInfo}>
                    <h3 className={styles.productName}>{product.name}</h3>
                    
                    <div className={styles.rating}>
                      <Space size={4}>
                        {this.renderStars(product.rating)}
                        <span className={styles.ratingText}>{product.rating}</span>
                      </Space>
                      <span className={styles.sales}>已售{product.sales}</span>
                    </div>
                    
                    <div className={styles.priceSection}>
                      <div className={styles.price}>
                        <span className={styles.currentPrice}>¥{product.price}</span>
                        <span className={styles.originalPrice}>¥{product.originalPrice}</span>
                      </div>
                      <Button 
                        size="mini" 
                        color="primary"
                        onClick={(e) => this.handleAddToCart(product, e)}
                      >
                        <ShopbagOutline />
                      </Button>
                    </div>
                  </div>
                </Card>
              </Grid.Item>
            ))}
          </Grid>
        </div>
      </div>
    );
  }
}

export default ProductList;
